/* stylelint-disable selector-class-pattern, no-descending-specificity */

:root {
  --color-hljs-text: var(--color-text-deep);
  --color-hljs-bg: var(--color-surface);
  --color-hljs-keyword: var(--color-error);
  --color-hljs-title: var(--color-brand-secondary);
  --color-hljs-attr: var(--color-brand-blue);
  --color-hljs-string: var(--color-text-deep);
  --color-hljs-built-in: var(--color-warning);
  --color-hljs-comment: var(--color-text-muted);
  --color-hljs-name: var(--color-success);
  --color-hljs-bullet: var(--color-warning-accent);
  --color-hljs-addition: var(--color-success);
  --color-hljs-addition-bg: color-mix(in srgb, var(--color-success) 15%, var(--color-surface));
  --color-hljs-deletion: var(--color-error);
  --color-hljs-deletion-bg: color-mix(in srgb, var(--color-error) 15%, var(--color-surface));
}

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: var(--space-4);
}

code.hljs {
  padding: var(--space-1) var(--space-2);
}

.hljs {
  background: var(--color-hljs-bg);
  color: var(--color-hljs-text);
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: var(--color-hljs-keyword);
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: var(--color-hljs-title);
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
  color: var(--color-hljs-attr);
}

.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
  color: var(--color-hljs-string);
}

.hljs-built_in,
.hljs-symbol {
  color: var(--color-hljs-built-in);
}

.hljs-code,
.hljs-comment,
.hljs-formula {
  color: var(--color-hljs-comment);
}

.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
  color: var(--color-hljs-name);
}

.hljs-subst {
  color: var(--color-hljs-text);
}

.hljs-section {
  color: var(--color-hljs-attr);
  font-weight: 700;
}

.hljs-bullet {
  color: var(--color-hljs-bullet);
}

.hljs-emphasis {
  color: var(--color-hljs-text);
  font-style: italic;
}

.hljs-strong {
  color: var(--color-hljs-text);
  font-weight: 700;
}

.hljs-addition {
  background-color: var(--color-hljs-addition-bg);
  color: var(--color-hljs-addition);
}

.hljs-deletion {
  background-color: var(--color-hljs-deletion-bg);
  color: var(--color-hljs-deletion);
}
